<template>
  <Card>
    <Table border :columns="showPost" :data="postList">
      <!--      功能-->
      <template slot-scope="{ row }" slot="action">
        <Button type="primary" size="small" @click="editPost(row.post_id)"
          >edit
        </Button>
        <Divider type="vertical" />
        <Poptip
          confirm
          title="Are you sure you want to delete this item?"
          @on-ok="removePost(row.post_id)"
          @on-cancel="$Message.info(`cancel delete post<${row.post_name}>`)"
          :transfer="true"
        >
          <Button type="error" size="small">delete</Button>
        </Poptip>
      </template>
      <!--      分类-->
      <template slot-scope="{ row }" slot="category">
        <Select
          :value="row.cate_id"
          v-model="row.cate_id"
          style="width:120px"
          @on-change="changeCategory(row.post_id, row.cate_id)"
          :transfer="true"
        >
          <Option
            v-for="item in cateList"
            :key="item.cate_id"
            :value="item.cate_id"
            >{{ item.cate_name }}
          </Option>
        </Select>
      </template>
      <!--      图片 -->
      <template slot="post_cover" slot-scope="{ row }">
        <Poptip
          :transfer="true"
          trigger="hover"
          title="文章封面图"
          placement="right"
        >
          <img slot="content" :src="row.post_cover" style="width: 200px;" />
          <img :src="row.post_cover" alt="" style="width: 80px;" />
        </Poptip>
      </template>
      <!--      更新时间-->
      <template slot="post_update_time" slot-scope="{ row }">
        {{ row.post_update_time | formatTime("yyyy-MM-dd hh:mm:ss") }}
      </template>
      <!--      状态-->
      <template slot-scope="{ row }" slot="status">
        <i-switch
          @on-change="onSwitchChange($event, row.post_id)"
          v-model="row.post_status"
          :true-value="0"
          :false-value="1"
          size="large"
          true-color="#13ce66"
          false-color="#ff4949"
        >
          <span slot="open">发布</span>
          <span slot="close">草稿</span>
        </i-switch>
      </template>
      <!--      标签-->
      <template slot-scope="{ row }" slot="tag">
        <Tag
          color="primary"
          v-for="item in row.tags"
          :key="item.tag_id"
          :value="item.tag_id"
          >{{ item.tag_name }}
        </Tag>
      </template>
    </Table>
    <Page
      :total="total"
      size="small"
      @on-change="pageChange"
      @on-page-size-change="pageSizeChange"
      show-elevator
      show-sizer
      show-total
      :current.sync="page"
      :page-size="size"
      :page-size-opts="[1, 3, 5, 10, 20]"
    />
  </Card>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "index",
  data() {
    return {
      page: 1,
      size: 3,
      total: 0,
      postList: [],
      cateList: [],
      showPost: [
        {
          title: "#",
          type: "index"
        },
        {
          title: "标题",
          key: "post_name"
        },
        {
          title: "封面",
          slot: "post_cover",
          align: "center"
        },
        {
          title: "分类",
          slot: "category",
          width: 150
        },
        {
          title: "标签",
          slot: "tag"
        },
        {
          title: "更新时间",
          slot: "post_update_time",
          width: 200,
          align: "center"
        },
        {
          title: "状态",
          slot: "status"
        },
        {
          title: "Action",
          slot: "action",
          width: 150,
          align: "center"
        }
      ]
    };
  },
  methods: {
    ...mapActions([
      "fetchAdminPostListByPage",
      "fetchBLogCategory",
      "determineChangeCategory",
      "changePostStatus",
      "deletePost"
    ]),

    pageChange() {
      this.getPostList();
    },
    async getCategoryList() {
      const res = await this.fetchBLogCategory();
      if (res.code === 2000) {
        // this.$Message.success("获取分类列表成功");
        this.cateList = res.data.content;
        return;
      }
      this.$Message.error("获取分类列表失败");
    },
    async getPostList() {
      const res = await this.fetchAdminPostListByPage({
        page: this.page,
        size: this.size
      });
      if (res.code === 2000) {
        // this.$Message.success("获取文章列表成功");
        this.postList = res.data.data;
        this.total = res.data.total;
        this.$Message.success("get post list successful");
        return;
      }
      this.$Message.error("获取文章列表失败");
    },
    async changeCategory(post_id, cate_id) {
      const res = await this.determineChangeCategory({
        id: post_id,
        formData: { cate_id }
      });
      if (res.code === 2002) {
        this.$Message.success("更改分类成功");
      } else {
        this.$Message.error("更改分类失败");
      }
      await this.getPostList();
      await this.getCategoryList();
    },
    async onSwitchChange(post_status, post_id) {
      const res = await this.changePostStatus({
        postStatus: { post_status },
        id: post_id
      });
      if (res.code === 2002) {
        this.$Message.success("更改状态成功");
      } else {
        this.$Message.error("更改状态失败");
      }
      await this.getPostList();
      await this.getCategoryList();
    },
    async removePost(id) {
      const res = await this.deletePost(id);
      if (res.code === 2003) {
        this.$Message.success("delete post successful");
        await this.getPostList();
      } else {
        this.$Message.error("delete post failed");
      }
    },
    pageSizeChange(size) {
      this.size = size;
      this.getPostList();
    },
    editPost(id) {
      this.$router.push({
        name: "PostAddAndEdit",
        query: {
          id: id
        }
      });
    }
  },
  created() {
    this.getPostList();
    this.getCategoryList();
  }
};
</script>

<style scoped></style>
